{include file="public/layout.htm" /}
<style>
    .layui-m-editor .layui-m-layerbtn {
        position: fixed;
        bottom: 0;
        background: #fff;
    }
    .layui-laydate-main{
        width: 100% !important;
    }
	.ideditor{
		height:100vh  !important;
		overflow-y: scroll  !important;
		padding-bottom: 120px !important;
	}
</style>
<body class="back-c">
    <div class="ey-content">
        <div class="nav-tab-block">
            <div class="tab-wrap">
                <div class="tab-item active">基础内容</div>
                <div class="tab-item ">SEO优化</div>
                <div class="tab-item ">更多设置</div>
            </div>
        </div>

        <form id="postForm" action="{:url('Article/edit', ['weappAjax'=>1, 'isMobile'=>1])}" method="post">
            <input type="hidden" name="gourl" value="{$gourl|default=''}">
            <input type="hidden" name="aid" value="{$field.aid|default='0'}">
            <div class="item-wrap-box" style="display: block;">
                <div class="item-wrap">
                    <div class="order-list">
                        <div class="list-left">文档标题<em class="color-red-text">*</em></div>
                        <div class="list-right">
                            <div class="ey-input">
                                <div class="ey-input-wrapper">
                                    <input type="text" name="title" value="{$field.title}" id="title" class="ey-input-input" maxlength="200" oninput="checkTitleRepeat(this, {$field.aid});" autocomplete="off">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="order-list">
                        <div class="list-left">副标题</div>
                        <div class="list-right">
                            <div class="ey-input">
                                <div class="ey-input-wrapper">
                                    <input type="text" name="subtitle" value="{$field.subtitle}" id="subtitle" class="ey-input-input" placeholder="请输入副标题" autocomplete="off">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="order-list">
                        <div class="list-left">栏目分类</div>
                        <input type="hidden" name="typeid" value="{$field.typeid}">
                        <div class="list-right"><span class="mr10">{$field.typename}</span></div>
                    </div>

                    <div class="order-list">
                        <div class="list-left">文档属性</div>
                        <div class="list-right" onclick="openArcAttr();">编辑<i class="iconfont icon-right"></i></div>
                    </div>
                    <div id="arcAttr" style="display: none;">
                        {volist name="archives_flags" id="vo"}
                            <input type="hidden" name="attr[{$vo.flag_fieldname}]" {if $field[$vo.flag_fieldname] == 1} value="1" {else/} value="0" {/if} class="allAttr attr_{$vo.flag_fieldname}" field="{$vo.flag_fieldname}">
                            <label class="checkbox-label">
                                <input type="checkbox" class="checkbox new_attr_{$vo.flag_fieldname}" name="{$vo.flag_fieldname}" value="1" {if $field[$vo.flag_fieldname] == 1} checked {/if} onclick="selectArcAttr('.attr_{$vo.flag_fieldname}', '.new_attr_{$vo.flag_fieldname}');">
                                <span class="check-mark"></span>
                                <span class="text">{$vo.flag_name}</span>
                            </label>
                        {/volist}
                        <div class="order-list {if condition='$field.is_jump != 1'}none{/if} dl_jump">
                            <div class="list-left">跳转网址</div>
                            <div class="list-right" style="display: block;">
                                <input type="text" value="{$field.jumplinks}" name="jumplinks" id="jumplinks" class="ey-input-input" placeholder="http://" style="width: 100%;height: 30px;">
                            </div>
                        </div>
                    </div>

                    <div class="order-list">
                        <div class="list-left">文档标签</div>
                        <div class="list-right">
                            <div class="ey-input">
                                <div class="ey-input-wrapper">
                                    <input type="text" name="tags" value="{$field.tags}" id="tags" class="ey-input-input" placeholder="多个标签之间以逗号隔开" autocomplete="off" onkeyup="this.value=this.value.replace(/[\，]/g,',');" onpaste="this.value=this.value.replace(/[\，]/g,',');">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="order-list">
                        <div class="list-left">封面图片</div>
                        <div class="list-right">
                            <div class="item-flex-img">
                                <a href="javascript:void(0);" id="a_litpic_local" onclick="$('#onclick_litpic_local').trigger('click');" class="img-upload mb15" title="点击上传">
                                    <div class="y-line" {notempty name="$field.litpic"} style="display: none;" {/notempty}></div>
                                    <div class="x-line" {notempty name="$field.litpic"} style="display: none;" {/notempty}></div>
                                    <img src="{$field.litpic|default=''}" {empty name="$field.litpic"} style="display: none;" {/empty}>
                                </a>
                                <input type="file" id="onclick_litpic_local" onchange="upload_litpic_local(this);" style="display: none;">
                                <input type="hidden" name="litpic_local" id="img_litpic_local" value="{$field.litpic|default=''}">
                            </div>
                        </div>
                    </div>

                    <div class="order-list">
                        <div class="list-left">内容详情</div>
                        <div class="list-right" onclick="openContent({$field.aid});">编辑<i class="iconfont icon-right"></i></div>
                    </div>
                </div>
            </div>

            <div class="item-wrap-box">
                <div class="item-wrap">
                    <div class="order-list">
                        <div class="list-left">SEO标题</div>
                        <div class="list-right">
                            <div class="ey-input">
                                <div class="ey-input-wrapper">
                                    <input type="text" value="{$field.seo_title}" name="seo_title" id="seo_title" class="ey-input-input" autocomplete="off">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="order-list">
                        <div class="list-left">SEO关键词</div>
                        <div class="list-right">
                            <div class="ey-input">
                                <div class="ey-input-wrapper">
                                    <input type="text" value="{$field.seo_keywords}" name="seo_keywords" id="seo_keywords" class="ey-input-input" autocomplete="off">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="order-list">
                        <div class="list-left">SEO描述</div>
                        <input type="hidden" id="seo_description" name="seo_description" value="{$field.seo_description}">
                        <div class="list-right" onclick="openSeoDescription();">编辑<i class="iconfont icon-right"></i></div>
                    </div>
                </div>
            </div>

            <div class="item-wrap-box">
                <div class="item-wrap">
                    <div class="order-list">
                        <div class="list-left">作者</div>
                        <div class="list-right">
                            <div class="ey-input">
                                <div class="ey-input-wrapper">
                                    <input type="hidden" value="{$field.users_id}" name="users_id">
                                    <input type="text" value="{$field.author}" name="author" id="author" class="ey-input-input" autocomplete="off">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="order-list">
                        <div class="list-left">来源</div>
                        <div class="list-right">
                            <div class="ey-input">
                                <div class="ey-input-wrapper">
                                    <input type="text" value="{$field.origin}" name="origin" id="origin" class="ey-input-input" autocomplete="off">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="order-list">
                        <div class="list-left">点击数</div>
                        <div class="list-right">
                            <div class="ey-input">
                                <div class="ey-input-wrapper">
                                    <input type="text" value="{$field.click}" name="click" id="click" class="ey-input-input" autocomplete="off">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="order-list">
                        <div class="list-left">阅读权限</div>
                        <div class="list-right">
                            <div class="list-right">
                                <div class="select">
                                    <input type="hidden" value="{$field.arcrank}" name="old_arcrank" class="input-txt">
                                    <select name="arcrank" id="arcrank" {if $field.arcrank < 0 && $admin_info.role_id > 0 && $auth_role_info.check_oneself < 1} disabled="disabled" {/if}>
                                        {volist name="arcrank_list" id="vo"}
                                        <option value="{$vo.rank}" {eq name="$vo.rank" value="$field.arcrank"}selected{/eq}>{$vo.name}</option>
                                        {/volist}
                                    </select>
                                </div>
                                <i class="iconfont icon-right"></i>
                            </div>
                        </div>
                    </div>

                    <div class="order-list">
                        <div class="list-left">发布时间</div>
                        <div class="list-right">
                            <div class="ey-input">
                                <div class="ey-input-wrapper">
                                    <input type="text" class="ey-input-input" id="add_time" name="add_time" value="{$field.add_time|date='Y-m-d H:i:s',###}" autocomplete="off" lay-key="1" readonly="readonly">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="order-list">
                        <div class="list-left">文档模板</div>
                        <div class="list-right">
                            <div class="list-right">
                                <div class="select">
                                    <select name="tempview" id="tempview">
                                        {volist name='$templateList' id='vo'}
                                        <option value="{$vo}" {eq name='$vo' value='$tempview'}selected{/eq}>{$vo}</option>
                                        {/volist}
                                    </select>
                                    <input type="hidden" name="type_tempview" value="{$tempview}" />
                                </div>
                                <i class="iconfont icon-right"></i>
                            </div>
                        </div>
                    </div>

                    <div class="order-list {notin name='$seo_pseudo' value='2,3'}no-grey{/notin}">
                        <div class="list-left">自定义文件名</div>
                        <div class="list-right">
                            <div class="ey-input">
                                <div class="ey-input-wrapper">
                                    <input type="text" {notin name='$seo_pseudo' value='2,3'}readonly="readonly" placeholder="动态模式下不支持"
                                    {eyou:else /}value="{$field.htmlfilename}"{/notin}  name="htmlfilename" id="htmlfilename" autocomplete="off" class="ey-input-input {notin name='$seo_pseudo' value='2,3'}no-drop{/notin}" autocomplete="off" style="padding-right: 37px;"><span style="position: absolute;right: 0;">.html</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <div class="w100-footer-wrap fixed-footer-wrap">
            <button class="w50-btn-no" data-url="{:weapp_url('Mbackend/Archives/index_archives')}" onclick="unifiedJump(this);">返回</button>
            <button class="w50-btn" onclick="submitForm();">保存</button>
        </div>
    </div>

    <!-- 采用snow主题 -->
    <link href="__WEAPP_TEMPLATE__/skin/css/quill.snow.css" rel="stylesheet">
    <!-- quill的主要js文件 -->
    <script src="__WEAPP_TEMPLATE__/skin/js/quill.min.js?v={$weappInfo.version|default='v1.0.0'}"></script>
    <script src="__WEAPP_TEMPLATE__/skin/js/image-resize.min.js?v={$weappInfo.version|default='v1.0.0'}"></script>

    <script type="text/javascript">
        layui.use('laydate', function() {
            var laydate = layui.laydate;
            laydate.render({ elem: '#add_time', type: 'datetime' });
        })
        $('.tab-wrap .tab-item').on('click', function () {
            $(this).addClass('active').siblings().removeClass('active');
            $('.item-wrap-box').hide().eq($('.tab-wrap .tab-item').index(this)).show();
        });
		var aaaa = getBrowserToolbarHeight();
		
        // 图片上传
        function upload_litpic_local(obj) {
            var file = $(obj)[0].files[0];
            if (!file) return false;
            var formData = new FormData();
            formData.append('_ajax', 1);
            formData.append('file', file);
            formData.append('weappAjax', 1);
            formData.append('compress', '1000-1000');
            layerLoading('正在上传');
            $.ajax({
                type: 'post',
                url : "{:url('Ueditor/imageUp')}",
                data: formData,
                dataType: 'json',
                contentType: false,
                processData: false,
                success: function (res) {
                    layer.closeAll();
                    if (res.state == 'SUCCESS') {
                        $('#img_litpic_local').val(res.url);
                        $('#a_litpic_local').find('div').hide();
                        $('#a_litpic_local').find('img').show().attr('src', res.url);
                        layerMsg('上传成功');
                    } else {
                        $('#img_litpic_local').val('');
                        $('#a_litpic_local').find('div').show();
                        $('#a_litpic_local').find('img').hide();
                        layerAlert(res.state);
                    }
                },
                error: function(e) {
                    layer.closeAll();
                    layerAlert(e.responseText);
                }
            })
        }

        // 打开文档属性选择框
        function openArcAttr() {
            var content = $('#arcAttr').html();
            layer.open({
                anim: 'up',
                content: content,
                shadeClose: false,
                title: ['文档属性'],
                btn: ['确定', '关闭'],
                success: function() {
                    $('.layui-m-layercont').find('input').eq(0).remove();
                },
                yes: function(index) {
                    $('#arcAttr .allAttr').each(function() {
                        if (1 === parseInt($('#arcAttr .attr_' + $(this).attr('field')).val())) {
                            $('#arcAttr .new_attr_' + $(this).attr('field')).attr('checked', true);
                        } else {
                            $('#arcAttr .new_attr_' + $(this).attr('field')).removeAttr('checked');
                        }
                    });
                    layer.close(index);
                },
                no: function() {
                    $('#arcAttr').html(content);
                }
            });
        }

        // 选择文档属性
        function selectArcAttr(name, new_name) {
            if (1 === parseInt($('#arcAttr ' + name).val())) {
                $('#arcAttr ' + name).val(0);
                $(new_name).removeAttr('checked');
            } else {
                $('#arcAttr ' + name).val(1);
                $(new_name).attr('checked', true);
            }
            if ('.new_attr_is_jump' == new_name) {
                if ($(new_name).is(':checked')) {
                    $('.dl_jump').show();
                } else {
                    $('.dl_jump').hide();
                }
            }
        }

        // 打开seo描述编辑框
        function openSeoDescription() {
            var description = $('#seo_description').val();
            var content = '<div id="seoDescriptionDiv"> <textarea id="seoDescription" style="width: 100%; height: 200px;border: none;">' + description + '</textarea> </div>';
            layer.open({
                anim: 'up',
                content: content,
                shadeClose: false,
                title: ['SEO描述'],
                btn: ['确定', '取消'],
                success: function(layero, index) {
                    $('#seoDescriptionDiv #seoDescription').focus();
                },
                yes: function(index) {
                    $('#seo_description').val($('#seoDescriptionDiv #seoDescription').val());
                    layer.close(index);
                },
                no: function() {
                    $('#seo_description').val(description);
                }
            });
        }
		function getBrowserToolbarHeight(viewportHeight,toolbarHeight) {
		  var windowHeight = window.innerHeight; // 窗口的总高度
		  var viewportHeight = document.documentElement.clientHeight; // 窗口的可视区域高度
		  var toolbarHeight = windowHeight - viewportHeight; // 工具条的高度
			
		  return {windowHeight:windowHeight, viewportHeight:viewportHeight, toolbarHeight:toolbarHeight};
		}
		
		
        // 打开内容编辑器
        function openContent(aid) {
			console.log(aaaa.toolbarHeight)
			console.log(aaaa.windowHeight)
            $.ajax({
                url : "{:weapp_url('Mbackend/Archives/openContent')}",
                data: {aid: aid, _ajax: 1},
                type: 'post',
                dataType: 'json',
                success: function(res) {
                    if (1 === parseInt(res.code)) {
                        var content = '<div id="editor" class="ideditor" style="overflow-y: scroll;height: calc('+aaaa.windowHeight+'px-'+aaaa.toolbarHeight+'px;margin-bottom:'+aaaa.toolbarHeight+'px);">' + res.data.content + '</div>';
                        var pageii = layer.open({
                            type: 1,
                            anim: 'up',
                            className: 'layui-m-editor',
                            content: content,
                            shadeClose: false,
                            style: 'position: fixed; left:0; top:0; width:100%; height:100%; border: none; -webkit-animation-duration: .5s; animation-duration: .5s;',
                            btn: ['确定', '取消'],
                            success: function(layero, index) {
							
                                var quill = new Quill('#editor', {
                                    theme: 'snow',
                                    modules: {
                                        imageResize: {},
                                        toolbar: [
                                            [{ header: [1, 2, false] }],
                                            ['bold', 'italic', 'underline', 'image', 'link', 'clean'],
                                        ],
                                    },
                                });
                            },
                            yes: function(index) {
                                saveContent(res.data.aid, $('#editor .ql-editor').html());
                            }
                        });
                    } else {
                        layerAlert(res.msg);
                    }
                },
                error: function(e) {
                    layerAlert(e.responseText);
                }
            });
        }

        // 保存编辑器内容到 cookie
        function saveContent(aid, content) {
            $.ajax({
                url : "{:weapp_url('Mbackend/Archives/saveContent')}",
                data: {aid: aid, content: content, _ajax: 1},
                type: 'post',
                dataType: 'json',
                success: function(res) {
                    layer.closeAll();
                },
                error: function(e) {
                    layerAlert(e.responseText);
                }
            });
        }

        // 提交保存文章
        function submitForm() {
            layerLoading('正在处理');
            $('#postForm').submit();
        }
    </script>
</body>
{include file="public/footer.htm" /}